<template>
  <div class="main_center">
    <el-button type="info" icon="el-icon-back" size="mini" @click="elevatorView">返回</el-button>
    <div class="state-list">
      <div style="width: max-content;margin: auto">
        <div class="state-box elevator-title">
          <div v-for="item in dataList" :key="item.id">
            <span>{{item.name}}</span>
            <span>{{item.no}}</span>
          </div>
        </div>
        <div class="state-box elevator-up">
          <div v-for="item in dataList" :key="item.id">
            <div v-for="(data, index) in item.up" :key="index">
              <img v-if="data === item.floor"
                   :style="{filter: `drop-shadow(0 50px ${statusColors[item.status]})`}"
                   src="static/svg/elevator.svg"
                   width="24" height="24" alt=""/>
              <span>{{data}}</span>
              <img v-if="data === item.floor"
                   :src="`static/svg/${icons[item.state]}.svg`"
                   width="24" height="24" alt=""/>
            </div>
          </div>
        </div>
        <div class="state-box elevator-below">
        <div v-for="item in dataList" :key="item.id">
          <div v-for="(data, index) in item.below" :key="index">
            <img v-if="data === item.floor"
                 :style="{filter: `drop-shadow(0 50px ${statusColors[item.status]})`}"
                 src="static/svg/elevator.svg"
                 width="24" height="24" alt=""/>
            <span>{{data}}</span>
            <img v-if="data === item.floor"
                 :src="`static/svg/${icons[item.state]}.svg`"
                 width="24" height="24" alt=""/>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "elevator-state",
  data() {
    return {
      ids: [],
      dataList: [],
      statusColors: ['#00B09e', '#F70000', '#999999'],
      icons: ['stop', 'up', 'below'],
    }
  },
  created() {
    this.ids = this.$route.query.ids;
    this.getData();
  },
  methods: {
    getData() {
      let testData = [
        {
          id: 1,
          name: '电梯1',
          no: 'DT000001',
          up: ['1', '2', '3', '4', '5', '6', '7', '8', '9', "10", '11', '12', '13', '14', '15'],
          below: ['B1', 'B2'],
          state: 0,
          status: 0,
          floor: '15',
        },
        {
          id: 2,
          name: '电梯2',
          no: 'DT000002',
          up: ['1', '2', '3', '4', '5', '6', '7', '8', '9', "10", '11', '12', '13', '14', '15'],
          below: [],
          state: 1,
          status: 0,
          floor: '6',
        },
        {
          id: 3,
          name: '电梯3',
          no: 'DT000003',
          up: ['1', '2', '3', '4', '5', '6', '7', '8', '9', "10", '11', '12'],
          below: ['B1'],
          state: 0,
          status: 2,
          floor: 'B1',
        },
        {
          id: 4,
          name: '电梯4',
          no: 'DT000004',
          up: ['1', '2', '3', '4', '5', '6', '7', '8', '9', "10", '11', '12', '13', '14', '15'],
          below: ['B1', 'B2'],
          state: 2,
          status: 0,
          floor: '12',
        },
        {
          id: 5,
          name: '电梯5',
          no: 'DT000005',
          up: ['1', '2', '3', '4', '5', '6', '7', '8'],
          below: [],
          state: 2,
          status: 0,
          floor: '2',
        },
        {
          id: 6,
          name: '电梯6',
          no: 'DT000006',
          up: ['1', '2', '3', '4', '5', '6', '7', '8'],
          below: ['B1', 'B2'],
          state: 0,
          status: 1,
          floor: '5',
        },
      ];
      for (let i = 0; i < this.ids.length; i++) {
        this.dataList.push(testData[i % testData.length]);
      }
    },
    elevatorView() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.main_center {
  padding: 10px;
  min-height: 100%;
  height: auto;
}

.state-list {
  height: 100%;
  overflow: auto;
  padding: 20px 14px;
}

.state-box {
  display: flex;
  justify-content: center;
  width: max-content;
}

.elevator-title div{
  width: 115px;
  height: 73px;
  border: 1px solid rgba(187, 187, 187, 100);
  border-radius: 2px;
  text-align: center;
  margin: 0 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: #101010;
}

.elevator-title div span {
  font-size: 16px;
}

.elevator-up > div {
  width: 144px;
  display: flex;
  flex-direction: column-reverse;
  margin-top: 20px;
  align-items: center;
}

.elevator-below > div {
  width: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.state-box > div > div {
  width: 85px;
  height: 37px;
  border: 1px solid rgba(187, 187, 187, 100);
  text-align: center;
  line-height: 37px;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: space-evenly;

  overflow: hidden;
}

.state-box > div > div img:first-child {
  position: relative;
  top: -50px;
}

</style>
